<script setup>
import {Delete} from "@element-plus/icons-vue";
import request9191 from "../../../utils/request9191.js";
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const formLabelWidth = "140px"
//获取全部通知
const clubInform = ref()
const allClubInform = () =>{
  if ((sessionStorage.getItem("name")) === null){
    ElMessage.error("请先登录")
    return
  }
  request9191({
    url: '/clubInform/findInform',
    method: 'get',
  }).then((res) =>{
    clubInform.value=res.data.data
  })
}
//---------------------------------------------------------------------
//发布公告
const sendInform = ref(false)
const addInform=ref({
  id:'',
  ctitle:'',
  cparticulars:'',
  cReTime:'',
})
const getAddInform = () => {
  if ((sessionStorage.getItem("name")) === null){
    ElMessage.error("请先登录")
    return
  }
  if ((addInform.value.ctitle === null || addInform.value.ctitle === '') ||
      (addInform.value.cparticulars === null || addInform.value.cparticulars === ''))
  {
    ElMessage.error("请填写完整")
    return
  }
  request9191({
    url: '/clubInform/add',
    method: 'post',
    data:{
      ctitle:addInform.value.ctitle,
      cparticulars:addInform.value.cparticulars,
      cReTime:addInform.value.cReTime,
    }
  }).then((res) =>{
    ElMessage.success("提交成功")
    clearInform()
    sendInform.value=false
    allClubInform()
  })
}
//------------------------------------------------------------------
//修改弹框
const xiuGai = ref(false)
//修改通知
const updateInform = ref({
  id:'',
  ctitle:'',
  cparticulars:'',
  cReTime:'',
})
//修改请求
const getUpdateInform = () =>{
  request9191({
    url: '/clubInform/update',
    method: 'put',
    data: {
      id:updateInform.value.id,
      ctitle:updateInform.value.ctitle,
      cparticulars:updateInform.value.cparticulars,
      cReTime:updateInform.value.cReTime
    }
  }).then((res)=>{
    ElMessage.success("修改成功")
    allClubInform()
    xiuGai.value=false
  })
}
//公告校验
const InformRules = ref({
  ctitle:[
    {required: true, message: "请输入通知标题", trigger: "blur"}
  ],
  cparticulars:[
    {required: true, message: "请输入通知详情", trigger: "blur"}
  ],
})

//-----------------------------------------------------------------

//删除公告
const DeleteInform = (id) => {
  ElMessageBox.confirm(
      '确认删除该条公告?',
      '温馨提示',
      {
        confirmButtonText:'确认',
        cancelButtonText:'取消',
        type:'warning'
      }
  )
      .then(()=>{
        request9191({
          url:'/clubInform',
          method:'delete',
          params:{
            id:id
          }
        }).then(() =>{
          ElMessage.success('删除成功')
          allClubInform()
        })
      }).catch(() =>{
    ElMessage({
      type:'info',
      message:'已取消'
    })
  })
}

//获取本行的通知
const getInformRow = (row) =>{
  updateInform.value.id = row.id
  updateInform.value.ctitle = row.ctitle
  updateInform.value.cparticulars = row.cparticulars
  updateInform.value.cReTime = row.cReTime
}

//清空公告数据
const clearInform = () =>{
  updateInform.value.ctitle=''
  updateInform.value.cparticulars=''
  updateInform.value.cReTime=''
  addInform.value.ctitle=''
  addInform.value.cparticulars=''
  addInform.value.cReTime=''

}
//新增，修改公告取消
const cancel = () =>{
  ElMessage.info("您已取消")
  clearInform()
  xiuGai.value=false
  sendInform.value=false
}


allClubInform()

</script>

<template>
<!--  发布公告-->
  <div class="header_top">
    <el-button plain @click="sendInform = true" type="success">
      发布公告
    </el-button>
  </div>
<!--  将公告信息渲染在页面上-->
  <el-card>
    <el-table :data="clubInform" style="width: 100%" border="border">
      <el-table-column prop="ctitle" label="通知标题"/>
      <el-table-column prop="cparticulars" label="通知详情"/>
      <el-table-column prop="cReTime" label="发布时间"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="default" type="primary" @click="xiuGai = true ; getInformRow(scope.row)" style="margin-left: 20px">修改公告</el-button>
          <el-button size="default" type="danger" @click="DeleteInform(scope.row.id)">
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!--新增社团弹框-->
  <el-dialog v-model="sendInform" title="填写社团信息" width="500" center>
    <el-form :model="addInform" :rules="InformRules">
      <el-form-item label="通知标题" :label-width="formLabelWidth" prop="ctitle">
        <el-input v-model="addInform.ctitle" autocomplete="off" />
      </el-form-item>
      <el-form-item label="通知详情" :label-width="formLabelWidth" prop="cparticulars">
        <el-input v-model="addInform.cparticulars" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="getAddInform()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--修改公告弹框弹框-->
  <el-dialog v-model="xiuGai" title="修改公告信息" width="500" center>
    <el-form :model="updateInform" :rules="InformRules">
      <el-form-item label="通知标题" :label-width="formLabelWidth" prop="ctitle">
        <el-input v-model="updateInform.ctitle" autocomplete="off" />
      </el-form-item>
      <el-form-item label="通知详情" :label-width="formLabelWidth" prop="cparticulars">
        <el-input v-model="updateInform.cparticulars" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="text-align: center">
      <el-button @click="cancel()">取消</el-button>
      <el-button type="success" @click="getUpdateInform()">
        修改
      </el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.header_top{
  margin-bottom: 20px;
}
</style>